<!--磁盘检测报告-->
<template>
  <div>
    <a-drawer
      :title="$t('Disk-test-report')"
      placement="right"
      :visible="visible"
      width="80%"
      @close="onClose"
      :maskClosable="false">
<!-- :maskClosable="false" -->
      <a-spin :spinning="detailSpinning">
      <a-row>
        <!--基础信息-->
        <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" :xxl="6" :xxxl="6">
          <div class="font-weight font-color3">{{$t('Base-info')}}</div>
          <div class="each-item" v-for="(item,index) in baseInfo" :key="index">
            <span v-if="$store.state.language=='zh'" class="font-color6" :class="$store.state.language=='zh'?'each-ch-title':'each-en-title'">{{item.ch_title}}</span>
            <span v-else class="font-color6" :class="$store.state.language=='zh'?'each-ch-title':'each-en-title'">{{item.en_title}}</span>
            <span v-if="index != 1" class="font-weight font-color3">{{item.value}}</span>
            <span v-else class="font-weight font-color3">
              <span v-if="item.value=='发现故障' || item.value=='Fault found'" class="red-circle"></span>
              <span v-else class="green-circle"></span>
              {{item.value}}
            </span>
          </div>
        </a-col>

        <!--磁盘检测结果概览-->
        <a-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :xxl="18" :xxxl="18">
          <div class="font-weight font-color3">{{$t('Overview-disk-test')}}</div>
          <div class="each-item">
            <span class="font-color3">{{$t('Hardware-type')}}：</span>
            <a-radio-group v-model="hardType" button-style="solid" @change="changeHardType" size="small" style="margin-right:20px">
              <!-- <a-radio-button value="all">{{$t('All')}}</a-radio-button> -->
              <a-radio-button value="0">SSD</a-radio-button>
              <a-radio-button value="1">HDD</a-radio-button>
            </a-radio-group>
            <span class="font-color3">{{$t('Application')}}：</span>
            <div v-for="(item,index) in diskCheckboxes" :key="index" class="top-legend">
              <span v-if="index == 0" class="blue-square"></span>
              <span v-else-if="index == 1" class="purple-square"></span>
              <span v-else-if="index == 2" class="green-square"></span>
              <span v-else-if="index == 3" class="grey-square"></span>
              <span v-if="$store.state.language=='zh'">{{item.ch_label}}</span>
              <span v-else>{{item.en_label}}</span>
            </div>
          </div>
          <div id="stackedChart"></div>
        </a-col>
      </a-row>
      
      <!-- 磁盘健康关键判定信息 -->
      <div class="font-weight font-color3">{{$t('Disk-health-info')}}</div>
      <div class="each-item">
        <!--检测结果-->
        <span class="font-color3">{{$t('Check-result')}}：</span>
        <a-radio-group v-model="resultType" button-style="solid" @change="changeResultType" size="small" style="margin-right:20px">
          <a-radio-button value="all">{{$t('All')}}</a-radio-button>
          <a-radio-button value="1">{{$t('Fault-disk')}}</a-radio-button><!--故障盘-->
          <a-radio-button value="0">{{$t('Normal-disk')}}</a-radio-button><!--正常盘-->
        </a-radio-group>
        <!--硬件类型-->
        <span class="font-color3">{{$t('Hardware-type')}}：</span>
        <a-radio-group v-model="hardType2" button-style="solid" @change="changeHardType2" size="small" style="margin-right:20px">
          <a-radio-button value="all">{{$t('All')}}</a-radio-button>
          <a-radio-button value="0">SSD</a-radio-button>
          <a-radio-button value="1">HDD</a-radio-button>
        </a-radio-group>
        <!--用途-->
        <span class="font-color3">{{$t('Application')}}：</span>
        <a-checkbox-group
            v-model="diskType2"
            @change="changeDiskType2"
            style="margin-right:20px"
        >
          <a-checkbox v-for="(item,index) in diskCheckboxes" :value="item.value" :key="index">
            <span v-if="$store.state.language=='zh'">{{item.ch_label}}</span>
            <span v-else>{{item.en_label}}</span>
          </a-checkbox>
        </a-checkbox-group>
        <!--仅显示收藏-->
        <span class="font-color3">{{$t('Show-collection')}}：</span>
        <a-checkbox v-model="isOnlyShowStar" @change="changeCollectCheck" style="margin-right:20px"></a-checkbox>
        <!--显示隐藏项-->
        <span class="font-color3">{{$t('Show-hidden-item')}}：</span>
        <a-checkbox v-model="isShowHideData" @change="changeShowHideData"></a-checkbox>
      </div>

      <!--类似表格-->
      <div style="height: 547px;overflow:auto">
        <a-row class="table-head">
          <a-col :span="6">
            <a-row class="top-left-row">
              <a-col :span="6">{{$t('Serial-number')}}</a-col>
              <a-col :span="18">{{$t('Basic-disk-info')}}</a-col>
            </a-row>
          </a-col>
          <a-col :span="18">
            <!--磁盘健康关键判定信息-->
            <div class="table-top-title1">{{$t('Disk-health-info')}}</div>
            <a-row class="top-right-row">
              <a-col :span="3" class="table-top-title">{{$t('Attribute-ID')}}</a-col>
              <a-col :span="5" class="table-top-title">ATTRIBUTE_NAME</a-col>
              <a-col :span="2" class="table-top-title">VALUE</a-col>
              <a-col :span="2" class="table-top-title">WORST</a-col>
              <a-col :span="2" class="table-top-title">THRESH</a-col>
              <a-col :span="2" class="table-top-title">TYPE</a-col>
              <a-col :span="2" class="table-top-title">UPDATED</a-col>
              <a-col :span="3" class="table-top-title">WHEN_FAILED</a-col>
              <a-col :span="3" class="table-top-title">RAW_VALUE</a-col>
            </a-row>
          </a-col>
        </a-row>
        <!--表格内容-->
        <div>
          <a-row v-for="(item,index) in tableData" :key="item.id" style="border-bottom:1px solid #e1e4e6">
            <a-col :span="6">
              <a-row class="content-left-row">
                <a-col :span="6" style="line-height: 216px;text-align: center;">{{index+1}}</a-col>
                <a-col :span="18">
                  <div class="each-item-desc"><!--标识符-->
                    <span :class="$store.state.language=='zh'?'info-title':'info-title2'">{{$t('Identifier')}}</span>
                    <span class="info-text">
                      <img v-if="item.star==1" src="../../../../../static/images/disk_check/16_f_ic_collect.png" alt="collect_img"/>
                      {{item.name}}
                      <img v-if="item.read == 0" src="../../../../../static/images/disk_check/pic_new.png" alt="new_img"/>
                    </span>
                  </div>
                  <div class="each-item-desc"><!--主机名-->
                    <span :class="$store.state.language=='zh'?'info-title':'info-title2'">{{$t('Hostname')}}</span>
                    <span class="info-text"> {{item.hostname}}</span>
                  </div>
                  <div class="each-item-desc"><!--类型-->
                    <span :class="$store.state.language=='zh'?'info-title':'info-title2'">{{$t('Type')}}</span>
                    <span class="info-text">
                      <span v-if="item.type == 0">SSD</span>
                      <span v-else>HDD</span>
                    </span>
                  </div>
                  <div class="each-item-desc"><!--定位灯-->
                    <span :class="$store.state.language=='zh'?'info-title':'info-title2'">{{$t('Locating-light')}}</span>
                    <span><a-switch size="small" v-model="item.light" @change="handleDiskLight(item)"/></span>
                  </div>
                  <div class="each-item-desc"><!--容量-->
                    <span :class="$store.state.language=='zh'?'info-title':'info-title2'">{{$t('Capacity')}}</span>
                    <span class="info-text">{{item.avail}}</span>
                  </div>
                  <div class="each-item-desc"><!--用途-->
                    <span :class="$store.state.language=='zh'?'info-title':'info-title2'">{{$t('Purpose')}}</span>
                    <span class="info-text">
                      <span v-if="item.app==0">{{$t('System-disk')}}</span>
                      <span v-else-if="item.app==1">{{$t('Cache-disk')}}</span>
                      <span v-else-if="item.app==2">{{$t('Data-disk')}}</span>
                      <span v-else-if="item.app==3">{{$t('No-active-disk')}}</span>
                    </span>
                  </div>
                  <div class="table-btn">
                    <a-tooltip v-if="item.read == 0">
                      <template slot="title">{{$t('Has-read')}}</template>
                      <img src="../../../../../static/images/disk_check/16_f_ic_read.png" @click="refreshKey(item.record_id,'read',1,item.wwid)" alt="read_img"/>
                    </a-tooltip>
                    <img v-else src="../../../../../static/images/disk_check/16_f_ic_read_forbidden.png" alt="forbidden_img"/>
                  </div>
                  <div class="table-btn">
                    <a-tooltip v-if="item.star == 1">
                      <template slot="title">{{$t('Cancel-favorites')}}</template>
                      <img src="../../../../../static/images/disk_check/16_f_ic_collect.png" @click="refreshKey(item.record_id,'star',0,item.wwid)" alt="collect_img"/>
                    </a-tooltip>
                    <a-tooltip v-else>
                      <template slot="title">{{$t('Collection')}}</template>
                      <img src="../../../../../static/images/disk_check/16_l_ic_collect.png" @click="refreshKey(item.record_id,'star',1,item.wwid)" alt="collect_img"/>
                    </a-tooltip>
                    <!-- <img v-if="item.star == 1" src="../../../../../static/images/disk_check/16_f_ic_collect.png" @click="refreshKey(item.record_id,'star',0,item.wwid)"/>
                    <img v-else src="../../../../../static/images/disk_check/16_l_ic_collect.png" @click="refreshKey(item.record_id,'star',1,item.wwid)"/> -->
                  </div>
                  <div class="table-btn">
                    <a-tooltip v-if="item.hidden==0">
                      <template slot="title">{{$t('Hide')}}</template>
                      <img src="../../../../../static/images/disk_check/16_f_ic_show.png" @click="refreshKey(item.record_id,'hidden',1,item.wwid)" alt="show_img"/>
                    </a-tooltip>
                    <a-tooltip v-else>
                      <template slot="title">{{$t('Cancel-hide')}}</template>
                      <img src="../../../../../static/images/disk_check/16_f_ic_conceal.png" @click="refreshKey(item.record_id,'hidden',0,item.wwid)" alt="conceal_img"/>
                    </a-tooltip>
                    <!-- <img v-if="item.hidden==0" src="../../../../../static/images/disk_check/16_f_ic_show.png" @click="refreshKey(item.record_id,'hidden',1,item.wwid)"/>
                    <img v-else src="../../../../../static/images/disk_check/16_f_ic_conceal.png" @click="refreshKey(item.record_id,'hidden',0,item.wwid)"/> -->
                  </div>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="18">
              <div class="left-content-box">
                <a-row class="content-right-row" v-for="item2 in item.smart_info" :key="item2.ID">
                  <a-col :span="3" class="table-top-title border-span">{{item2.ID}}</a-col>
                  <a-col :span="5" class="table-top-title border-span">{{item2.ATTRIBUTE_NAME}}</a-col>
                  <a-col :span="2" class="table-top-title border-span">{{item2.VALUE}}</a-col>
                  <a-col :span="2" class="table-top-title border-span">{{item2.WORST}}</a-col>
                  <a-col :span="2" class="table-top-title border-span">{{item2.THRESH}}</a-col>
                  <a-col :span="2" class="table-top-title border-span">{{item2.TYPE}}</a-col>
                  <a-col :span="2" class="table-top-title border-span">{{item2.UPDATED}}</a-col>
                  <a-col :span="3" class="table-top-title border-span">{{item2.WHEN_FAILED}}</a-col>
                  <a-col :span="3" class="table-top-title border-span">{{item2.RAW_VALUE}}</a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <!-- <a-table :data-source="tableData" :locale="defaultSetting" bordered :pagination='pagination' :columns="columns" size="small">
        <template slot="title">
          <div class="left-title">.</div>
          <div class="right-title">{{$t('Disk-health-info')}}</div>
        </template> -->
        <!-- <a-table-column key="num" title="序号" data-index="num"  /> -->
        <!-- <a-table-column key="info" title="磁盘基本信息" data-index="info">
          注释 <template slot="info" slot-scope="text, record">
          <template slot-scope="text, record">
            <div>
              <span class="info-title">标识符</span>
              <span class="info-text">
                <img src="../../../../../static/images/disk_check/16_f_ic_collect.png" />
                aaa
                <img src="../../../../../static/images/disk_check/pic_new.png" />
              </span>
            </div>
            <div><span class="info-title">型号</span><span class="info-text"></span></div>
            <div><span class="info-title">类型</span><span class="info-text"></span></div>
            <div><span class="info-title">容量</span><span class="info-text"></span></div>
            <div><span class="info-title">用途</span><span class="info-text"></span></div>
            注释 是否已读
            <div class="table-btn">
              <img src="../../../../../static/images/disk_check/16_f_ic_read.png" />
              <img src="../../../../../static/images/disk_check/16_f_ic_read_forbidden.png" />
            </div>
            注释 是否收藏
            <div class="table-btn">
              <img src="../../../../../static/images/disk_check/16_f_ic_collect.png" />
              <img src="../../../../../static/images/disk_check/16_l_ic_collect.png" />
            </div>
            注释 是否隐藏
            <div class="table-btn">
              <img src="../../../../../static/images/disk_check/16_f_ic_conceal.png" />
              <img src="../../../../../static/images/disk_check/16_f_ic_show.png" />
            </div>
          </template>
        </a-table-column> -->
        <!-- <a-table-column-group>
          <span slot="title">磁盘健康关键判定信息</span>
          <a-table-column key="id" title="属性ID" data-index="id"></a-table-column>
          <a-table-column key="name" title="ATTRIBUTE_NAME" data-index="name"></a-table-column>
          <a-table-column key="value" title="VALUE" data-index="value"></a-table-column>
          <a-table-column key="worst" title="WORST" data-index="worst"></a-table-column>
          <a-table-column key="thresh" title="THRESH" data-index="thresh"></a-table-column>
          <a-table-column key="type" title="TYPE" data-index="type"></a-table-column>
          <a-table-column key="updated" title="UPDATED" data-index="updated"></a-table-column>
          <a-table-column key="when_failed" title="WHEN_FAILED" data-index="when_failed"></a-table-column>
          <a-table-column key="raw_value" title="RAW_VALUE" data-index="raw_value"></a-table-column>
        </a-table-column-group> -->
      <!-- </a-table> -->
      </a-spin>
    </a-drawer>
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import request from '@/request/request'
    
export default {
  name: "RecordDetail",
  props: {
    visible: {
      type: Boolean
    },
    target: {
      type: Object
    },
    detailSpinning: {
      type: Boolean
    },
  },
  data() {
    return {
      columns: [
        {
          title:this.$t('Serial-number'),
          dataIndex: 'id',
          key: 'id',
          // slots: { title: 'num' },
          ellipsis: true,
          // scopedSlots: { customRender: 'num' },
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {
                // rowSpan: 2
              }
            };
            obj.attrs.rowSpan = record.rowSpan;
            return obj;
          },
        },
        {
          title: this.$t('Basic-disk-info'),
          dataIndex: 'info',
          key: 'info',
          // slots: { title: 'num' },
          ellipsis: true,
          width: 200,
          // scopedSlots: { customRender: 'info' },
          customRender: (text, record, index) => {
            const obj = {
              children: (
                <div>
                  <div>
                    <span class="info-title">{this.$t('Identifier')}</span>
                    <span class="info-text">
                      <div class="collected-img"></div>
                      {record.star == 0 ? '' : <div class="collected-img"></div>}
                      {record.name}
                      {record.read == 0 ? <div class="new-img"></div> : ''}
                    </span>
                  </div>
                  <div><span class="info-title">{this.$t('Type')}</span><span class="info-text">{record.type==0?'HDD':'SDD'}</span></div>
                  <div><span class="info-title">{this.$t('Capacity')}</span><span class="info-text">{record.avail}</span></div>
                  <div><span class="info-title">定位灯</span><a-switch size="small" /></div>
                  <div>
                    <div class="info-title">{this.$t('Purpose')}</div><span class="info-text">
                      <span v-if="record.app == 0">系统盘</span>
                      <span v-else-if="record.app == 1">缓存盘</span>
                      <span v-else-if="record.app == 2">数据盘</span>
                      <span v-else>未激活盘</span>
                    </span>
                  </div>
                  <div class="table-btn">
                    {record.read == 0 ? <div class="read-img" onclick={()=>{this.isReadFun(record)}}></div> : <div class="has-read-img"></div>}
                  </div>
                  <div class="table-btn">
                    {record.star == 0 ? <div class="collect-img"></div> :<div class="collected-img"></div>}
                    
                  </div>
                  <div class="table-btn">
                    {record.hidden == 0 ? <div class="show-img"></div> :<div class="hide-img"></div>}
                    
                  </div>
                </div>
              ),
              attrs: {},
            };
            obj.attrs.rowSpan = record.rowSpan;
            return obj;
          }
        },
        {
          title: this.$t('Attribute-ID'),
          dataIndex: 'ID',
          // key: 'id',
          ellipsis: true,
          // scopedSlots: { customRender: 'id' },
        },
        {
          title: 'ATTRIBUTE_NAME',
          dataIndex: 'ATTRIBUTE_NAME',
          // key: 'name',
          ellipsis: true,
          // scopedSlots: { customRender: 'name' },
        },
        {
          title: 'VALUE',
          dataIndex: 'VALUE',
          // key: 'value',
          ellipsis: true,
          // scopedSlots: { customRender: 'value' },
        },
        {
          title: 'WORST',
          dataIndex: 'WORST',
          // key: 'worst',
          ellipsis: true,
          // scopedSlots: { customRender: 'worst' },
        },
        {
          title: 'THRESH',
          dataIndex: 'THRESH',
          // key: 'thresh',
          ellipsis: true,
          // scopedSlots: { customRender: 'thresh' },
        },
        {
          title: 'TYPE',
          dataIndex: 'TYPE',
          // key: 'type',
          ellipsis: true,
          // scopedSlots: { customRender: 'type' },
        },
        {
          title: 'UPDATED',
          dataIndex: 'UPDATED',
          // key: 'updated',
          ellipsis: true,
          // scopedSlots: { customRender: 'updated' },
        },
        {
          title: 'WHEN_FAILED',
          dataIndex: 'WHEN_FAILED',
          // key: 'when_failed',
          ellipsis: true,
          // scopedSlots: { customRender: 'when_failed' },
        },
        {
          title: 'RAW_VALUE',
          dataIndex: 'RAW_VALUE',
          // key: 'raw_value',
          ellipsis: true,
          // scopedSlots: { customRender: 'raw_value' },
        },
      ],
      baseInfo: [
        {ch_title: '检测记录ID', en_title: 'Test record ID', value: ''},
        {ch_title: '检测结果', en_title: 'Detection result', value: ''},
        {ch_title: '检测方式', en_title: 'Detection method', value: ''},
        {ch_title: '开始时间', en_title: 'Start time', value: ''},
        {ch_title: '结束时间', en_title: 'End time', value: ''},
        {ch_title: '检测耗时', en_title: 'Detection time', value: ''}
      ],
      hardType: '0',
      hardType2: 'all',
      diskType2: ['0','1','2','3'],
      diskCheckboxes: [
        {ch_label:'系统盘', en_label:'System disk', value:'0'},
        {ch_label:'缓存盘', en_label:'Cache disk', value:'1'},
        {ch_label:'数据盘', en_label:'Data disk', value:'2'},
        {ch_label:'未纳管盘', en_label:'Not in tube disk', value:'3'},
      ],
      option: {},
      option_copy: {},
      resultType: 'all',
      isShowHideData: true,
      isOnlyShowStar: false,
      tableData: [
        // {key:'1',num:1,info:'1',id:1,name:'-',VALUE:'-',WORST:'-',THRESH:'-',type:'-',UPDATED:'-',when_failed:'-',raw_value:'-',rowSpan:3},
        // {key:'2',num:2,info:'1',id:2,name:'-',VALUE:'-',WORST:'-',THRESH:'-',type:'-',UPDATED:'-',when_failed:'-',raw_value:'-',rowSpan:0},
        // {key:'3',num:3,info:'3',id:3,name:'-',VALUE:'-',WORST:'-',THRESH:'-',type:'-',UPDATED:'-',when_failed:'-',raw_value:'-',rowSpan:0},
        // {key:'4',num:4,info:'4',id:4,name:'-',VALUE:'-',WORST:'-',THRESH:'-',type:'-',UPDATED:'-',when_failed:'-',raw_value:'-',rowSpan:2},
      ],
      tableData_copy: [],
      pagination:{
	      defaultPageSize:17,
	      showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
	      showSizeChanger:true,
	      pageSizeOptions: ['10', '50'],
	      onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
	      buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
      },
      defaultSetting: {emptyText:<EmptyData />},
      systemDisks: [],
      cacheDisks: [],
      dataDisks: [],
      noReceiveDisks: [],
      totalDisks: 0,
      normalDisks: 0,
      errorDisks: 0
    }
  },
  watch: {
    visible(newValue) {
      if(newValue) {
        // console.log('target', this.target)
        // for(let i=0; i<this.target.record.length; i++) {
        //   for(let j=0; j<this.target.record[i].smart_info.length; j++) {
        //     if(j==0) {
        //       this.target.record[i].smart_info[0].rowSpan = this.target.record[i].smart_info.length;
        //     }else {
        //       this.target.record[i].smart_info[j].rowSpan = 0;
        //     }
        //     this.target.record[i].smart_info[j].app = this.target.record[i].app;
        //     this.target.record[i].smart_info[j].avail = this.target.record[i].avail;
        //     this.target.record[i].smart_info[j].hidden = this.target.record[i].hidden;
        //     this.target.record[i].smart_info[j].hostname = this.target.record[i].hostname;
        //     this.target.record[i].smart_info[j].id = this.target.record[i].id;
        //     this.target.record[i].smart_info[j].name = this.target.record[i].name;
        //     this.target.record[i].smart_info[j].read = this.target.record[i].read;
        //     this.target.record[i].smart_info[j].record_id = this.target.record[i].record_id;
        //     this.target.record[i].smart_info[j].result = this.target.record[i].result;
        //     this.target.record[i].smart_info[j].star = this.target.record[i].star;
        //     this.target.record[i].smart_info[j].test_status = this.target.record[i].test_status;
        //     this.target.record[i].smart_info[j].type = this.target.record[i].type;
        //     this.target.record[i].smart_info[j].wwid = this.target.record[i].wwid;
        //     this.tableData.push(this.target.record[i].smart_info[j]);
        //   }
        // }
        this.tableData = this.target.record;
        this.tableData_copy = this.target.record;
        this.baseInfo[0].value = this.target.general_report.record_id;
        this.baseInfo[1].value = this.target.general_report.result==0?this.$t('No-fault-found'):this.$t('Fault-found');
        this.baseInfo[2].value = this.target.general_report.type==0?this.$t('Quick-check'):this.$t('Deep-check');
        this.baseInfo[3].value = this.target.general_report.start_time;
        this.baseInfo[4].value = this.target.general_report.end_time;
        if(this.$store.state.language == 'zh') {
          this.baseInfo[5].value = this.target.general_report.consume_time;
        }else {
          this.baseInfo[5].value = this.target.general_report.consume_time.replace(/天/,'day').replace(/小时/,'hours').replace(/分钟/,'minutes');
        }
        //绘制图表
        this.getChartData(this.target.general_report.record_id);
        // this.$nextTick(() => {
          
        // })
      }
    },
    '$store.state.language'() {
      this.columns = [
        {title:this.$t('Serial-number'), dataIndex: 'num', key: 'num', ellipsis: true,
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            };
            obj.attrs.rowSpan = record.rowSpan;
            return obj;
          },
        },
        {title: this.$t('Basic-disk-info'), dataIndex: 'info', key: 'info', ellipsis: true, width: 200,
          customRender: (text, record, index) => {
            const obj = {
              children: (
                <div>
                  <div>
                    <span class="info-title">{this.$t('Identifier')}</span>
                    <span class="info-text">
                      <div class="collected-img"></div>
                      aaa
                      <div class="new-img"></div>
                    </span>
                  </div>
                  <div><span class="info-title">{this.$t('Model')}</span><span class="info-text"></span></div>
                  <div><span class="info-title">{this.$t('Type')}</span><span class="info-text"></span></div>
                  <div><span class="info-title">{this.$t('Capacity')}</span><span class="info-text"></span></div>
                  <div><span class="info-title">{this.$t('Purpose')}</span><span class="info-text"></span></div>
                  <div class="table-btn">
                    {text=="a"?<div class="read-img" onclick={()=>{this.isReadFun(record)}}></div>:''}
                    <div class="read-img" onclick={()=>{this.isReadFun(record)}}></div>
                  </div>
                  <div class="table-btn">
                    <div class="collected-img"></div>
                  </div>
                  <div class="table-btn">
                    <div class="hide-img"></div>
                  </div>
                </div>
              ),
              attrs: {},
            };
            obj.attrs.rowSpan = record.rowSpan;
            return obj;
          }
        },
        { title: this.$t('Attribute-ID'), dataIndex: 'id', ellipsis: true,},
        { title: 'ATTRIBUTE_NAME', dataIndex: 'ATTRIBUTE_NAME', ellipsis: true,},
        { title: 'VALUE', dataIndex: 'VALUE', ellipsis: true, },
        { title: 'WORST', dataIndex: 'WORST', ellipsis: true, },
        { title: 'THRESH', dataIndex: 'THRESH', ellipsis: true, },
        { title: 'TYPE', dataIndex: 'TYPE', ellipsis: true, },
        { title: 'UPDATED', dataIndex: 'UPDATED', ellipsis: true, },
        { title: 'WHEN_FAILED', dataIndex: 'WHEN_FAILED', ellipsis: true, },
        { title: 'RAW_VALUE', dataIndex: 'RAW_VALUE', ellipsis: true, },
      ]
    }
  },
  methods: {
    //获取堆叠图数据
    getChartData(record_id, type=0) {
      request('post', 'diskhealth/health/graph',{
        record_id: record_id,
        type: type
      }).then(res => {
        // console.log('堆叠图数据', res)
        let data = res.data.result;
        //系统盘
        this.systemDisks[0] = data.unhealth_sys;
        this.systemDisks[1] = data.health_sys;
        this.systemDisks[2] = data.health_sys + data.unhealth_sys;
        //缓存盘
        this.cacheDisks[0] = data.unhealth_cache;
        this.cacheDisks[1] = data.health_cache;
        this.cacheDisks[2] = data.health_cache + data.unhealth_cache;
        //数据盘
        this.dataDisks[0] = data.unhealth_data;
        this.dataDisks[1] = data.health_data;
        this.dataDisks[2] = data.health_data + data.unhealth_data;
        //未纳管盘
        this.noReceiveDisks[0] = data.unhealth_free;
        this.noReceiveDisks[1] = data.health_free;
        this.noReceiveDisks[2] = data.health_free + data.unhealth_free;

        this.totalDisks = data.unhealth_sys + data.health_sys + data.health_cache + data.unhealth_cache + data.health_data + data.unhealth_data + data.health_free + data.unhealth_free;
        this.normalDisks = data.health_sys + data.health_cache + data.health_data + data.health_free;
        this.errorDisks = data.unhealth_sys + data.unhealth_cache + data.unhealth_data + data.unhealth_free;
        this.drawStackedChart();
      }).catch(err => {
        console.log(err);
      })
    },

    //筛选方法
    filterTableData() {
      // this.resultType
      // this.hardType2
      // this.diskType2
      // this.isOnlyShowStar
      // this.isShowHideData
      let finalData = this.tableData_copy;
      if(this.resultType != 'all') {
        finalData = this.tableData_copy.filter(item => {
          return item.result == this.resultType;
        })
      }
      if(this.hardType2 != 'all') {
        finalData = finalData.filter(item => {
          return item.type == this.hardType2;
        })
      }
      //要是用途都没勾选，怎么办
      if(this.diskType2.length != 4 && this.diskType2.length != 0) {
        finalData = finalData.filter(item => {
          return this.diskType2.includes(String(item.app));
        })
      }else if(this.diskType2.length == 0) {
        this.tableData = [];
        return;
      }
      if(!this.isShowHideData) {//不显示隐藏项
        finalData = finalData.filter(item => {
          return item.hidden == 0;
        })
      }
      if(this.isOnlyShowStar) { //仅显示收藏
        finalData = finalData.filter(item => {
          return item.star == 1;
        })
      }
      this.tableData = finalData;
    },

    //改变硬件类型
    changeHardType(valueObj) {
      this.getChartData(this.target.general_report.record_id, valueObj.target.value);
      // if(valueObj.target.value == '0') {
      //   this.option.series = this.option_copy.series.slice(0,1);
      // }else if(valueObj.target.value == '1') {
      //   this.option.series = this.option_copy.series.slice(1);
      // }else {
      //   this.option.series = this.option_copy.series;
      // }
      // let myChart = this.$echarts.init(document.getElementById('stackedChart'));
      // myChart.setOption(this.option, true);//true重绘
    },
    changeHardType2() {
      this.filterTableData();
    },
    //改变用途
    changeDiskType2(value) {
      this.filterTableData();
    },

    //绘制磁盘检测结果堆叠图
    getStackedChart(options) {
      let myChart = this.$echarts.init(document.getElementById('stackedChart'));
      let option = options;
      myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize()});
    },

    drawStackedChart() {
      this.option = {
        color: ['#006db8', '#6772e5', '#059db3', '#b5bbbe'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {
        //   orient: "vertical",
        //   right: 0,
        //   top: 'center',
        //   itemGap: 40
        // },
        grid: {
          top: "2%",
          left: '2%',
          right: '15%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: [this.$t('Fault-disk'), this.$t('Normal-disk'), this.$t('Total-disk-detected')] //'故障盘', '正常盘', '检测磁盘总数'
        },
        series: [
          {
            name: this.$t('System-disk'),
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: (params) => {
                if(params.value != 0) {
                  if(params.dataIndex == 0) { //故障盘
                    return `${params.value}(${(params.value/this.errorDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 1) { //正常盘
                    return `${params.value}(${(params.value/this.normalDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 2) { //检测磁盘总数
                    return `${params.value}(${(params.value/this.totalDisks).toFixed(2)*100}%)`
                  }
                }else {
                  return ``
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.systemDisks
          },
          {
            name: this.$t('Cache-disk'),
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: (params) => {
                if(params.value != 0) {
                  if(params.dataIndex == 0) { //故障盘
                    return `${params.value}(${(params.value/this.errorDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 1) { //正常盘
                    return `${params.value}(${(params.value/this.normalDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 2) { //检测磁盘总数
                    return `${params.value}(${(params.value/this.totalDisks).toFixed(2)*100}%)`
                  }
                }else {
                  return ``
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.cacheDisks
          },
          {
            name: this.$t('Data-disk'),
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: (params) => {
                if(params.value != 0) {
                  if(params.dataIndex == 0) { //故障盘
                    return `${params.value}(${(params.value/this.errorDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 1) { //正常盘
                    return `${params.value}(${(params.value/this.normalDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 2) { //检测磁盘总数
                    return `${params.value}(${(params.value/this.totalDisks).toFixed(2)*100}%)`
                  }
                }else {
                  return ``
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.dataDisks
          },
          {
            name: this.$t('Not-in-tube-disk'),
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: (params) => {
                if(params.value != 0) {
                  if(params.dataIndex == 0) { //故障盘
                    return `${params.value}(${(params.value/this.errorDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 1) { //正常盘
                    return `${params.value}(${(params.value/this.normalDisks).toFixed(2)*100}%)`
                  }else if(params.dataIndex == 2) { //检测磁盘总数
                    return `${params.value}(${(params.value/this.totalDisks).toFixed(2)*100}%)`
                  }
                }else {
                  return ``
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.noReceiveDisks
          },
        ]
      }
      this.option_copy = JSON.parse(JSON.stringify(this.option))
      this.getStackedChart(this.option);
    },

    //改变检查结果类型
    changeResultType() {
      this.filterTableData();
    },

    //仅显示收藏
    changeCollectCheck() {
      this.filterTableData();
    },

    //是否显示隐藏项
    changeShowHideData() {
      this.filterTableData();
    },

    //获取磁盘检测报告
    getDiskCheckRecord(record) {
      return new Promise((resolve, reject) => {
        request('get', 'diskhealth/health/report',{
          // params: {
            record_id: record
          // }
        }).then(res => {
          resolve(res);
        }).catch(err => {
          reject(err)
          console.log(err)
        })
      }) 
    },

    //更新报告标志位
    refreshKey(record_id, key, status, wwid) {
      request('post', 'diskhealth/update_scan',{
        record_id: record_id,
        key: key,
        status: status,
        wwid: wwid
      }).then(async res => {
        if(res.data.success) {
          let updateRes = await this.getDiskCheckRecord(record_id);
          this.tableData = [];
          this.tableData = updateRes.data.record;
          // this.$message.success(res.data.msg);
          this.$message.success(this.$t('Operate-ok'));
          this.tableData_copy = updateRes.data.record;
          this.filterTableData();//更新筛选后的表格数据
        }else {
          this.$message.error(this.$t('Operate-no'));
        }
      }).catch(err => {
        console.log(err);
      })
    },

    //磁盘点灯
    handleDiskLight(item) {
      item.light = !item.light;
      request('get', 'machine/disk/light',{
        // params: {
          wwid: item.wwid,
          status: !item.light?1:0 //0不开灯 1开灯
        // }
      }).then(res => {
        // console.log('磁盘点灯', res)
        if(res.data.flag == 0) {
          // this.$message.success('磁盘点灯操作成功！');
          this.$message.success(this.$t('Disk-lighting-ok'));
          item.light = !item.light;
        }else {
          // this.$message.error('磁盘点灯操作失败！硬件不支持！');
          this.$message.success(this.$t('Disk-lighting-no'));
        }
        // this.model(res.data.id) //返回模板
        // this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
      }).catch(err => {
        console.log(err);
      })
    },

    

    //关闭抽屉
    onClose() {
      this.$emit('closeDrawer');
      this.hardType = '0';
      this.resultType = 'all';
      this.diskType2 = ['0','1','2','3'];
      this.hardType2 = 'all';
      this.isShowHideData = true;
      this.isOnlyShowStar = false;
    },
    
  }
}
</script>

<style scoped>
.green-square,
.purple-square,
.blue-square,
.grey-square {
  display: inline-block;
  width: 30px;
  height: 15px;
  border-radius: 2px;
  background-color: var(--mainGreenColor);
  margin-right: 5px;
  vertical-align: sub;
}
.purple-square {
  background-color: var(--mainPurpleColor);
}
.blue-square {
  background-color: var(--themeColor);
}
.grey-square {
  background-color: #b5bbbe;
}
.top-legend {
  display: inline-block;
  margin-right: 30px;
  line-height: 21px;
}
.font-weight {
  font-weight: 700;
}
.font-color3 {
  color: #333;
}
.font-color6 {
  color: #666;
}
.each-item {
  margin: 8px 0;
}
.each-ch-title {
  display: inline-block;
  width: 100px;
}
.each-en-title {
  display: inline-block;
  width: 180px;
}
#stackedChart {
  width: 793px;
  height: 180px;
}
.info-title {
  display: inline-block;
  width: 80px;
  padding: 5px 0px;
}
.info-title2 {
  display: inline-block;
  width: 100px;
  padding: 5px 0px;
}
.info-text {
  display: inline-block;
  font-weight: 700;
}
.info-text img {
  vertical-align: text-bottom;
}
.table-btn {
  display: inline-block;
  border: solid 1px #ebebeb;
  width: 33%;
	height: 28px;
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
}
.left-title {
  display: inline-block;
  width: 25.15%;
  background-color: #edf0f2;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  padding: 5px;
}
.right-title {
  display: inline-block;
  width: 74.85%;
  background-color: #e1e4e6;
  border: 1px solid #e8e8e8;
  text-align: center;
  padding: 5px;
}
.read-img,
.has-read-img,
.collected-img,
.collect-img,
.hide-img,
.show-img,
.new-img {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background: url('../../../../../static/images/disk_check/16_f_ic_read.png') no-repeat;
}
.has-read-img {
  background: url('../../../../../static/images/disk_check/16_f_ic_read_forbidden.png') no-repeat;
}
.collected-img {
  background: url('../../../../../static/images/disk_check/16_f_ic_collect.png') no-repeat;
}
.collect-img {
  background: url('../../../../../static/images/disk_check/16_l_ic_collect.png') no-repeat;
}
.hide-img {
  background: url('../../../../../static/images/disk_check/16_f_ic_conceal.png') no-repeat;
}
.show-img {
  background: url('../../../../../static/images/disk_check/16_f_ic_show.png') no-repeat;
}
.new-img {
  width: 32px;
  margin-left: 5px;
  background: url('../../../../../static/images/disk_check/pic_new.png') no-repeat;
}

::v-deep.ant-table-thead > tr:nth-child(1) > th:nth-of-type(1),
::v-deep.ant-table-thead > tr:nth-child(1) > th:nth-of-type(2) {
  background: #edf0f2 !important;
}
::v-deep.ant-table-tbody > tr > td:nth-of-type(2) {
  padding: 0 !important;
}
/* ::v-deep.ant-table-bordered .ant-table-tbody > tr > td:nth-child(1),
::v-deep.ant-table-bordered .ant-table-tbody > tr > td:nth-child(2) {
  background: #f1f8fe !important;
} */
::v-deep.ant-table-tbody > tr > td[rowSpan] {
  background: #f1f8fe !important;
}
::v-deep.ant-table-title {
  padding: 0 !important;
  border: none !important;
}
::v-deep.ant-table-thead > tr > th {
  color: #666 !important;
}

.table-head {
  /* width: 360px; */
  height: 90px;
}
.top-left-row {
  height: 92px;
  background-color: #ebebeb;
  line-height: 92px;
  text-align: center;
}
.top-right-row,
.content-right-row {
  height: 55px;
  background-color: #e1e4e6;
  line-height: 55px;
}
.table-top-title1 {
  color: #666;
  text-align: center;
  background-color: #e1e4e6;
  font-weight: 500;
  padding: 8px 0;
}
.table-top-title {
  color: #666;
  font-weight: 500;
  text-align: center;
}
.content-left-row {
  height: 226px;
  background-color: #f1f8fe;
}
.content-right-row {
  background-color: #fff;
  height: auto;
}
.left-content-box {
  height: 226px;
  overflow: auto;
}
.border-span {
  border: 1px solid #ebebeb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.each-item-desc {
  padding: 0 5px;
  box-sizing: border-box;
}

@media screen and (min-width: 1920px) {
  .left-title {
    width: 21.9%;
  }
  .right-title {
    width: 78.1%;
  }
  #stackedChart {
    width: 1129.5px;
    height: 180px;
  }
}
</style>